<!--操作-->
<nz-row>
  <!--  <button nz-button nzType="primary" (click)="showCheckModal(true)"-->
  <!--          *ngIf="permission.userPermission.has('customization:manage:order-manage:check')">批量审核-->
  <!--  </button>-->
  <button nz-button nzType="primary" style="margin-right: 16px" (click)="addBrandModalShow()"
          *ngIf="permission.userPermission.has('aisi-price:quoteDataConfig:addBrand')">新增品牌
  </button>
  <button nz-button nzType="primary" style="margin-right: 16px" (click)="addSeriesModalShow()"
          *ngIf="permission.userPermission.has('aisi-price:quoteDataConfig:addSeries')">新增系列
  </button>
  <button nz-button nzType="primary" (click)="addTypeModalShow()"
          *ngIf="permission.userPermission.has('aisi-price:quoteDataConfig:addType')">新增机型
  </button>
</nz-row>
<!--表格-->
<nz-table
  style="min-width: 1488px;overflow-x: auto"
  #rowSelectionTable
  nzShowSizeChanger
  nzShowQuickJumper
  [nzData]="tableData"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th>品牌名称</th>
    <th>系列名称</th>
    <th>机型名称</th>
    <th nzAlign="center">ID</th>
    <th nzAlign="center">规格</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center">排序</th>
    <th nzAlign="center">图标</th>
    <th nzAlign="center">操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of rowSelectionTable.data">
    <ng-container *ngFor="let item of mapOfExpandedData[data['key']]">
      <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
        <td [nzShowExpand]="!!item.children&&item.type ===0"
            [(nzExpand)]="item.expand"
            (nzExpandChange)="collapse(mapOfExpandedData[data['key']], item, $event)"
        >
          {{ item.type === 0 ? item.name : '' }}
        </td>
        <td [nzShowExpand]="!!item.children&&item.type ===1"
            [(nzExpand)]="item.expand"
            (nzExpandChange)="collapse(mapOfExpandedData[data['key']], item, $event)">
          {{item.type === 1 ? item.name : '' }}
        </td>
        <td [nzShowExpand]="!!item.children&&item.type ===2"
            [(nzExpand)]="item.expand"
            (nzExpandChange)="collapse(mapOfExpandedData[data['key']], item, $event)">
          {{item.type === 2 ? item.name : '' }}
        </td>
        <td nzAlign="center">{{item.key}}</td>
        <td nzAlign="center">{{item.spec}}</td>
        <td nzAlign="center"
            [ngStyle]="{color: item['status']===1?'#67C23A':'#F56C6C'}">{{item['status'] === 1 ? '启用' : '禁用'}}</td>
        <td nzAlign="center">{{item.sort}}</td>
        <td nzAlign="center">
          <img *ngIf="item.url"
               nz-image
               style="width: 60px;height: 60px"
               [nzSrc]="item.url"
               alt=""
          />
        </td>
        <td nzAlign="center">
          <a style="color: #409EFF" (click)="editRow(item)"
             *ngIf="permission.userPermission.has('aisi-price:quoteDataConfig:edit')">编辑</a>
          <a style="color: #F56C6C" *ngIf="permission.userPermission.has('aisi-price:quoteDataConfig:delete')"
             nzPopconfirmPlacement="top"
             nz-popconfirm
             nzPopconfirmTitle="确认要删除该数据吗?"
             nzOkText="确认"
             nzCancelText="取消"
             (nzOnConfirm)="deleteRow(item)"
          >删除</a></td>
      </tr>
    </ng-container>
  </ng-container>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>

<!--新增品牌-->
<nz-modal
  [(nzVisible)]="addBrandModal.visible"
  [nzTitle]="addBrandModal.id?'编辑品牌':'新增品牌'"
  (nzOnCancel)="addBrandModalHide()"
  (nzOnOk)="addBrandModalSave()"
  [nzOkLoading]="addBrandModal.loading"
>
  <ng-container *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addBrandModalName"><span>*</span>品牌名称:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addBrandModalName" nz-input placeholder="请输入品牌名称" [(ngModel)]="addBrandModal.name"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label><span>*</span>图标:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-upload id="image"
                   style="max-width: 120px"
                   class="avatar-uploader"
                   [(nzFileList)]="imageList"
                   nzListType="picture-card"
                   [nzShowUploadList]="false"
                   [nzBeforeUpload]="beforeUpload"
                   nzAccept="image/*"
        >
          <ng-container *ngIf="!previewImg">
            <i class="upload-icon" nz-icon [nzType]="'plus'"></i>
          </ng-container>
          <img *ngIf="previewImg" [src]="previewImg" style="width: 100%;max-height: 102px"/>
        </nz-upload>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addBrandModalSort"><span>*</span>排序:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addBrandModalSort" type="number" nz-input placeholder="请输入排序" [(ngModel)]="addBrandModal.sort"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addBrandModalStatus"><span>*</span>状态:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="labelCol" style="text-align: left">
        <nz-radio-group id="addBrandModalStatus" [(ngModel)]="addBrandModal.status">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-col>
    </nz-row>
  </ng-container>
</nz-modal>
<!--新增系列-->
<nz-modal
  [(nzVisible)]="addSeriesModal.visible"
  [nzTitle]="addSeriesModal.id?'编辑系列':'新增系列'"
  (nzOnCancel)="addSeriesModalHide()"
  [nzOkLoading]="addSeriesModal.loading"
  (nzOnOk)="addSeriesModalSave()"
>
  <ng-container *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addSeriesModalName"><span>*</span>系列名称:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addSeriesModalName" nz-input placeholder="请输入系列名称" [(ngModel)]="addSeriesModal.name"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addSeriesModalBrand"><span>*</span>所属品牌:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-select id="addSeriesModalBrand" [(ngModel)]="addSeriesModal.brand" nzPlaceHolder="请选择所属品牌"
                   style="width: 100%" nzAllowClear>
          <nz-option *ngFor="let item of brandOptions" [nzLabel]="item['name']" [nzValue]="item['id']"></nz-option>
        </nz-select>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addSeriesModalSort"><span>*</span>排序:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addSeriesModalSort" nz-input type="number" placeholder="请输入排序" [(ngModel)]="addSeriesModal.sort"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addSeriesModalStatus"><span>*</span>状态:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="labelCol" style="text-align: left">
        <nz-radio-group id="addSeriesModalStatus" [(ngModel)]="addSeriesModal.status">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-col>
    </nz-row>
  </ng-container>
</nz-modal>
<!--新增机型-->
<nz-modal
  [(nzVisible)]="addTypeModal.visible"
  [nzTitle]="addTypeModal.id?'编辑机型':'新增机型'"
  (nzOnCancel)="addTypeModalHide()"
  [nzOkLoading]="addTypeModal.loading"
  (nzOnOk)="addTypeModalSave()"
>
  <ng-container *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addTypeModalName"><span>*</span>机型名称:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addTypeModalName" nz-input placeholder="请输入机型名称" [(ngModel)]="addTypeModal.name"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addTypeModalBrand"><span>*</span>所属系列:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <nz-select id="addTypeModalBrand" [(ngModel)]="addTypeModal.series" nzPlaceHolder="请选择所属系列" style="width: 100%"
                   (ngModelChange)="seriesChange($event)"
                   nzAllowClear>
          <nz-option *ngFor="let item of seriesOptions" [nzLabel]="item['name']" [nzValue]="item['id']"></nz-option>
        </nz-select>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px;color: #999999" *ngIf="addTypeModal.brandName">
      <nz-col nzSpan="4" class="labelCol">
        <label>所属品牌:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="labelCol" style="text-align: left">
        {{addTypeModal.brandName}}
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" style="text-align: right;" class="labelCol">
        <label><span>*</span>规格:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="specifications" #specifications>
        <nz-row *ngFor="let specification of addTypeModal.specifications;let index=index"
                [ngStyle]="{marginBottom: addTypeModal.specifications.length>1?'8px':'0'}">
          <nz-col nzSpan="16">
            <input [attr.id]="'addTypeModalSpecification'+index" nz-input (keyup.enter)="appendSpecification()"
                   nzTooltipTitle="单机回车键添加下一行。"
                   nzTooltipPlacement="top" nz-tooltip
                   placeholder="请输入规格" [(ngModel)]="specification.name"/>
          </nz-col>
          <nz-col nzSpan="7" nzOffset="1"
                  style="display: flex;flex-direction: row;align-items: center">
            <i (click)="removeSpecification(index)" *ngIf="addTypeModal.specifications.length>1" nz-icon nzType="delete"
               nzTheme="outline"
               style="font-size: 24px;color: #F56C6C;margin-right: 16px"></i>
            <i (click)="appendSpecification()" *ngIf="index+1===addTypeModal.specifications.length" nz-icon
               nzType="plus-square" nzTheme="outline" style="font-size: 24px;color: #409EFF"></i>
          </nz-col>
        </nz-row>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addTypeModalSort"><span>*</span>排序:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <input id="addTypeModalSort" nz-input type="number" placeholder="请输入排序" [(ngModel)]="addTypeModal.sort"/>
      </nz-col>
    </nz-row>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" class="labelCol">
        <label for="addTypeModalStatus"><span>*</span>状态:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1" class="labelCol" style="text-align: left">
        <nz-radio-group id="addTypeModalStatus" [(ngModel)]="addTypeModal.status">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-col>
    </nz-row>
  </ng-container>
</nz-modal>
